<!--学员处分信息 新增-->
<template>
	<div>
		<div class="my-form-container" style="height:342px;margin-left:40px;margin-right:40px">
            <el-form ref="ruleForm" :model="ruleForm" :rules="rules" class="demo-ruleForm">
                <el-row class="my-form-item">
                    <el-col :span="12">
                        <div class="my-form-item-label">处分名称</div>
                        <el-form-item  prop="name">
                            <div class="my-form-item-value">
                                <el-input class="inputWidth" v-model="ruleForm.name" ></el-input>
                            </div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <div class="my-form-item-label">选择处分学员</div>
                        <el-form-item  prop="studentName">
                            <div class="my-form-item-value chose-student">
                               <el-input class="inputWidth" v-model="ruleForm.studentName" disabled></el-input>
                               <img src="../../../../assets/assessment/icon-plan-record-detail.png" @click="choseDialog"> 
                               <img src="../../../../assets/assessment/icon-delete.png" @click="deleteInput"> 
                            </div>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row class="my-form-item">
                    <el-col :span="12">
                        <div class="my-form-item-label">处分类别</div>
                        <el-form-item  prop="putype2">
                            <div class="my-form-item-value">
                                <el-select v-model="ruleForm.putype1" placeholder="请选择" class="selectWidth right10" @change="choseNext">
                                    <el-option v-for="item in type1" :key="item.typeName" :label="item.typename" :value="item.typeName"></el-option>
                                </el-select>
                                <el-select v-model="ruleForm.putype2" placeholder="请选择" class="selectWidth">
                                    <el-option v-for="item in type2" :key="item.typeName" :label="item.typename" :value="item.typeName"></el-option>
                                </el-select>
                            </div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <div class="my-form-item-label">下达部门</div>
                        <el-form-item  prop="issudept">
                            <div class="my-form-item-value">
                                <el-input class="inputWidth" v-model="ruleForm.issudept"></el-input>
                            </div>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row class="my-form-item">
                    <el-col :span="12">
                        <div class="my-form-item-label">生效日期</div>
                        <el-form-item  prop="effdate">
                            <div class="my-form-item-value">
                                <el-date-picker class="time" v-model="ruleForm.effdate" type="date" value-format="yyyy-MM-dd"></el-date-picker>
                            </div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <div class="my-form-item-label">下达文号</div>
                        <el-form-item  prop="docno">
                            <div class="my-form-item-value">
                                <el-input class="inputWidth" v-model="ruleForm.docno"></el-input>
                            </div>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row class="my-form-item">
                    <el-col :span="12">
                        <div class="my-form-item-label">处分文件</div>
                        <el-form-item  prop="pufile">
                            <div class="my-form-item-value">
                                <el-input class="inputWidth" v-model="ruleForm.pufile"></el-input>
                            </div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <div class="my-form-item-label">发文日期</div>
                        <el-form-item  prop="senddate">
                            <div class="my-form-item-value">
                                <el-date-picker class="time" v-model="ruleForm.senddate" type="date" value-format="yyyy-MM-dd"></el-date-picker>
                            </div>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row class="my-form-item lastOne" style="border:none">
                    <el-col :span="12">
                        <div class="my-form-item-label">处分原因</div>
                        <el-form-item  prop="reason">
                            <div class="my-form-item-value" style="line-height:88px">
                                <el-input class="inputWidth" v-model="ruleForm.reason" type="textarea" :rows="3"></el-input>
                            </div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <div class="my-form-item-label"></div>
                        <el-form-item></el-form-item>
                    </el-col>
                </el-row>
            </el-form>
		</div>
		<div class="button-group">
			<div class="" @click="save">保存</div>
            <div class="" @click="cancel">取消</div>
		</div>
        <!-- 选择学员 -->
        <chose-student ref="choseDialog" @choseXY="getStudent"></chose-student>
	</div>
</template>

<script>
import {addPunishInfo} from "@/api/student";
import ChoseStudent from '@/components/choseStudent';


  export default {
		data(){
		  return {
            type1:[],
            type2:[]
,           ruleForm:{
                name:'',
                putype2:'',
                issudept:'',
                effdate:'',
                docno:'',
                senddate:'',
                reason:'',
                studentName:'',
                studentId:'',
            },
            rules: {
                name: [
                    { required: true, message: '请填写下处分名称', trigger: 'blur' }
                ],
                putype2: [
                    { required: true, message: '请选择处分类别', trigger: 'change' }
                ],
                studentName: [
                    { required: true, message: '请选择学员', trigger: 'change' }
                ],
                issudept: [
                    { required: true, message: '请填写下达部门', trigger: 'blur' }
                ],
                effdate: [
                    { required: true, message: '请选择生效日期', trigger: 'change' }
                ],
                docno: [
                    { required: true, message: '请填写下达文件号', trigger: 'blur' }
                ],
                senddate: [
                    { required: true, message: '请选择发文日期', trigger: 'change' }
                ],
                reason: [
                    { required: true, message: '请填写处分原因', trigger: 'blur' }
                ]
            }
          }
		},
        components: {
            ChoseStudent
        },
        mounted(){
            this.commonApi.getPunishList({typeParent:0}).then(res=>{
                this.type1 = res.data
            })
        },
        methods: {
             //选择学员
            choseDialog(){
                this.$refs.choseDialog.dialogVisible = true
            },
            deleteInput(){
                this.ruleForm.studentName = '';
                this.ruleForm.studentId = '';
            },
            getStudent(e){
                this.$set(this.ruleForm,'studentName',e.studentName)
                this.$set(this.ruleForm,'studentId',e.id)
            },
            //获取下级处罚列表
            choseNext(e){
                this.commonApi.getPunishList({typeParent:e.value}).then(res=>{
                    this.type2 = res.data
                })
            },
            //保存数据
            save(){
                this.$refs['ruleForm'].validate(async (valid) => {
                    if (valid) {
                        let res = await addPunishInfo(this.ruleForm);
                        if(res.code == 200){
                            this.$message({message: '新增成功',type: 'success'});
                            this.$router.push({
                                path:'/student/disciplinaryInfo/punishment/list'
                            })
                        }else{
                            this.$message.error(res.msg);
                        }
                    } 
                });
            },
            //取消
            cancel(){
                this.$router.push({
                    path:'/student/disciplinaryInfo/punishment/list'
                })
            }
        }
  };
</script>
<style scoped lang="less" scoped>
@import "../../../../styles/commonCss.less";
    /deep/.demo-ruleForm{
        .el-form-item{
            margin-bottom: 0!important;
            width: 100%;
        }
        .el-form-item__error {
            top: 75%;
            left: 42px;
        }
    }
    /deep/.my-form-item-label{justify-content: center;padding: 0!important;}
	.inputWidth{width: 258px;}
    .selectWidth{width: 158px;}
    .right10{margin-right: 10px;}
    .lastOne{
        border:none;height:100px;
        /deep/.el-form-item__error {
            top:96%;
        }
    }
    .chose-student{
        display: flex;
        align-items: center;
        img{
            width: 22px;
            height: 22px;
            margin: 0 10px;
            cursor: pointer;
        }
    }
</style>